<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="4" :sm="24">
              <a-form-item label="员工号">
                <a-input v-model="queryParam.no" placeholder="请输入员工号"/>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item label="所属组织">
                <a-input v-model="queryParam.dept" placeholder="请输入所属组织"/>
              </a-form-item>
            </a-col>
            <a-col :md="4" :sm="24">
              <a-form-item label="姓名">
                <a-input v-model="queryParam.name" placeholder="请输入姓名"/>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="起始日期">
                <a-range-picker v-model:value="queryParam.dateRange"/>
              </a-form-item>
            </a-col>


            <a-col :md="4" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="() => {
                  this.queryParam = {}
                  $refs.table.refresh(true)
                }">重置</a-button>

                <a-button style="margin-left: 8px" @click="downloadExcel" v-if="canExport">导出</a-button>
                <a-button style="margin-left: 8px" @click="downloadExcel" disabled v-else>导出</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <s-table
        ref="table"
        size="default"
        rowKey="id"
        :columns="columns"
        :data="loadData"
      >
        <span slot="status" slot-scope="text, record">
          <a-badge :status="record.status === '0' ? 'success' : 'default'" :text="record.status === '0' ? '显示' : '隐藏'"/>
        </span>
        <span slot="avatar" slot-scope="text, record">
          <a-avatar v-if="record.user.avatar" :src="$staticPrefix(record.user.avatar)"/>
        </span>
        <span slot="tag" slot-scope="text, record">
          <ellipsis :length="20" tooltip>{{ text }}</ellipsis>
        </span>
        <span slot="created_at" slot-scope="text">
          <span>{{ text | dayjs }}</span>
        </span>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import moment from 'moment'
import {STable, Ellipsis} from '@/components'
import {exportExcel, getList} from '@/api/attendance'

const columns = [
  {
    title: '头像',
    dataIndex: 'avatar',
    align: 'center',
    scopedSlots: {customRender: 'avatar'}
  },
  {
    title: '员工姓名',
    dataIndex: 'nickname',
    align: 'center',
    customRender: (text, record) => {
      return record.user.nickName || '-';
    }
  },
  {
    title: '员工号',
    dataIndex: 'no',
    align: 'center',
    customRender: (text, record) => {
      return record.user.no || '-';
    }
  },
  {
    title: '所属组织',
    dataIndex: 'dept',
    align: 'center',
    customRender: (text, record) => {
      return record.user.dept_name || '-';
    }
  },
  {
    title: '考勤类型',
    align: 'center',
    dataIndex: 'attendance_type',
    customRender: e => {
      return e || '-'
    }
  },
  {
    title: '考勤时间',
    align: 'center',
    dataIndex: 'created_at',
    scopedSlots: {customRender: 'created_at'}
  },
]

export default {
  name: 'index',
  components: {
    STable,
    Ellipsis,
  },
  data() {
    this.columns = columns
    return {
      // create model
      confirmLoading: false,
      mdl: null,
      // 查询参数
      queryParam: {},
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        const requestParameters = Object.assign({}, parameter, this.queryParam)
        let dateRange = this.queryParam.dateRange
        requestParameters.startDate = dateRange ? dateRange[0].format('YYYY-MM-DD') : ""
        requestParameters.endDate = dateRange ? dateRange[1].format('YYYY-MM-DD') : ""
        return getList(requestParameters)
          .then(res => {
            return res.data
          })
      },
    }
  },
  computed: {
    canExport: function(){
      return Object.values(this.queryParam).length > 0;
    }
  },
  methods: {
    resetSearchForm() {
      this.queryParam = {
        // date: moment(new Date())
      }
    },
    downloadExcel() {
      exportExcel(this.queryParam).then(res => {
        let blob = new Blob([res]);
        let objectUrl = URL.createObjectURL(blob);

        let a = document.createElement("a");
        a.href = objectUrl;
        a.download = "考勤.xlsx";
        //a.click();
        //下面这个写法兼容火狐
        a.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));
        window.URL.revokeObjectURL(blob);
      })

    }

  }
}
</script>
